<template>
    <view style="padding-bottom: 50rpx;">
        <!-- 显示图片 -->
        <img style="width: 100%;height: 230rpx;" src="https://mall.shop.xyzac.cn/uploads/images/20250124004405f391e1717.png"
            alt="">
        <!-- 导航栏 -->
        <u-navbar class="borderUnset" title="数实资产账户" :autoBack="true" :background="{ backgroundColor: '' }"
            back-icon-color="#fff" title-color="#fff" :title-bold="true" title-size="32rpx">
        </u-navbar>
        <!-- 表单内容 -->
        <view class="content">
            <u-form :model="form" ref="uForm">
                <!-- 账户类型选择 -->
                <u-form-item label="账户类型" prop="type">
                    <view style="color:#000;width: 100%;display: flex;justify-content: space-between;"
                        @tap="selectShow = true">{{ defSelectLabel }} <u-icon color="#999" size="30"
                            name="arrow-right"></u-icon></view>
                </u-form-item>
                <!-- 文交所账号输入 -->
                <u-form-item label="文交所账号" prop="account"><u-input v-model="form.account"
                        placeholder="请输入文交所账号" /></u-form-item>
                <!-- 姓名输入 -->
                <u-form-item label="姓名" prop="name"><u-input v-model="form.name" placeholder="请输入姓名" /></u-form-item>
                <!-- 提示信息 -->
                <view class="tips" style="justify-content: space-between;">
                    <p>可用红色积分：{{ exchangeData.able_exchange }}</p>
                    <p>比例：{{ exchangeData.rate }}:1</p>
                    <p style="width: 110rpx;height: 100rpx;">最低{{ exchangeData.min_exchange }}起
                        每次互转要
                        100的倍数</p>
                </view>
                <!-- 兑换数量输入 -->
                <u-form-item label="兑换数量" prop="num"><u-input :onChange="$u.debounce(changeNum, 300)" v-model="form.num"
                        placeholder="请输入兑换数量(正整数)" /></u-form-item>
                <!-- 手续费提示 -->
                <view class="tips">
                    <p>手续费：{{ exchangeData.percentage }}%</p>
                    <p>需 {{ points }} 红色积分</p>
                </view>
            </u-form>
        </view>
        <!-- 协议确认 -->
        <view class="ischeck">
            <u-checkbox active-color="#BF1A20" shape="circle" v-model="isCheck" :name="1">
                <p>我已阅读并同意</p>
            </u-checkbox>
			<router-link to="/bundle/pages/server_explan/server_explan?type=4">
				 <view >《兑换协议》</view>
			</router-link> 
           
        </view>

        <!-- 提交按钮 -->
        <u-button :custom-style="{ background: '#BF1A20' }" class="submit" shape="circle" @tap="submit">确认</u-button>
        <!-- 选择框 -->
        <u-select confirm-color="#BF1A20" :default-value="defSelectIndex" v-model="selectShow" :list="selectList"
            @confirm="selectChange"></u-select>

        <!-- 提示框 -->
        <u-toast ref="uToast" />
    </view>
</template>

<script>
	import {
	    apiExchangeGetConfig,
	    apiExchangeApply
	} from "@/api/user.js";
export default {
    data() {
        return {
			exchangeData: {
			    able_exchange: 0, //可提现
			    min_exchange: '', //最小提现金额
			    max_exchange: '', //最大提现金额
			    percentage: '', //提现手续百分比
			    rate: 1 //比例
			},
            // 消耗积分
            points: 0,
            // 手续费
            price: 5,
            // 表单数据
            form: {
                type: 0, // 提现类型
                account: '', // 提交账号
                name: '', //真是姓名
                num: '', // 兑换数量
            },
            // 已确认协议
            isCheck: null,
            // 显示选择弹窗
            selectShow: false,
            // 选择列表
            selectList: [
                {
                    label: '文交所',
                    value: 1
                },
                {
                    label: '股票交易',
                    value: 2
                }
            ],
            // 表单校验规则
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: ['change'],
                    }
                ],
                type: [
                    {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            if (!value) return false
                            else return true
                        },
                        message: '请选择账户类型',
                        // 触发器可以同时用blur和change
                        trigger: ['change', 'blur'],
                    }
                ],
                account: [
                    {
                        required: true,
                        message: '请输入文交所账号',
                        trigger: ['change', 'blur'],
                    }
                ],
                num: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value <= 0 || !Number(value)) return false
                            else return true
                        },
                        message: '请输入兑换数量',
                        type: 'number',
                        trigger: ['change', 'blur'],
                    }
                ]
            }
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    computed: {
        // 计算选中的下标
        defSelectIndex() {
            let index = 0
            for (let i = 0; i < this.selectList.length; i++) {
                if (this.selectList[i].value === this.form.type) {
                    index = i
                    break
                }
            }
            return [index]
        },
        // 计算选中的名称
        defSelectLabel() {
            let lable = '请选择账户类型'
            for (let i = 0; i < this.selectList.length; i++) {
                if (this.selectList[i].value === this.form.type) {
                    return this.selectList[i].label
                }
            }
            return lable
        }

    },
	onShow() {
	    this.getExchangeData();
	},
    methods: {
		// 获取提现基础数据
		getExchangeData() {
		    apiExchangeGetConfig().then(res => {
		        this.exchangeData = res;
		    })
		},
		
        // 兑换数变更
        changeNum() {
            // 计算积分
            if(!this.form.num){
                this.points = 0
                return false
            }
            
        },
        // 选择账户类型
        selectChange(value) {
            this.form.type = value[0].value
        },
        // 查看协议
        read() {
            uni.navigateTo({ url: '' })
        },
        // 提交
        submit() {
            // 校验表单
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    // 验证通过;
                    if (!this.isCheck) {
                        this.$refs.uToast.show({
                            title: '请确认并同意《兑换协议》',
                        })
                        return false
                    }
                    
					const params = {
					    type: this.form.type, //提现类型
					    account: this.form.account, //提现余额
					    real_name: this.form.name, //真实姓名
					    money: this.form.num, //备注
					}
				
					
					apiExchangeApply({
					        ...params
					    })
					    .then(res => {
					        this.form.num = ''
							
							 uni.showToast({
								title: '兑换申请成功',
								icon: 'success',  // 显示成功图标
								duration: 2000    // 显示时间 2 秒
							});
							this.$Router.push({
							    path: '/pages/user/user',
							})
					    })
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.borderUnset ::v-deep .u-border-bottom:after {
    border: unset !important;
}

::v-deep .u-navbar-placeholder {
    display: none;
}

.tips {
    margin-top: 25rpx;
    font-size: 22rpx;
    display: flex;
    gap: 50rpx;

}

::v-deep .uni-input-input {
    font-size: 32rpx !important;
}

.content {
    margin: -80rpx 30rpx 30rpx 30rpx;
    background: #fff;
    border-radius: 12rpx;
    position: relative;
    padding: 5rpx 40rpx 40rpx 40rpx;

    &::before {
        content: '';
        position: absolute;
        top: -10rpx;
        bottom: -10rpx;
        left: -10rpx;
        right: -10rpx;
        background: #fff;
        opacity: .3;
        border-radius: 12rpx;

    }
}

.ischeck {
    display: flex;
    margin-left: 30rpx;
    align-items: center;

    p {
        font-size: 24rpx;
        color: #999;
    }

    span {
        font-size: 24rpx;
        color: #000;
        margin-left: -20rpx;
    }
}

.submit {
    width: 360rpx;
    margin: auto;
    margin-top: 100rpx;
    color: #fff;

    &:active {
        background: #fd5050 !important;
        color: #fff !important;
    }

    &:hover {
        background: #fd5050 !important;
        color: #fff !important;
    }
}

::v-deep .u-radio {
    display: block;
    margin-right: 5rpx;
}

::v-deep .u-checkbox__icon-wrap {
    width: 28rpx !important;
    height: 28rpx !important;
}

::v-deep .u-form-item__body {
    flex-direction: column !important;
}

::v-deep .u-form-item--left {
    width: auto !important;
}

::v-deep .u-form-item {
    padding: 5rpx 0 15rpx 0 !important;
}

::v-deep .u-form-item--left__content__label {
    font-size: 26rpx;
    width: 100% !important;
    color: #000
}
</style>